9/25 Edit

Next13 的渲染方式看下一篇文章就好，下面的內容沒什麼重點，建議跳過。

講古時間

昨天講到了 SSR, SSG, ISR, CSR 這四種渲染模式。

在 Next13 以前只能在 page-level 的頁面 fetch data，透過 page 頁面中 export Next 內建的 function，像是 getServerSideProps 和 getStaticProps。透過這些 function 及設定，也可以明確的選擇一種模式去渲染。

但在 Next13 的 App Router 不是以整個頁面的方式去做切分，官方文件也有寫原因：

In most websites, routes are not fully static or fully dynamic - it's a spectrum. For example, you can have e-commerce page that uses cached product data that's revalidated at an interval, but also has uncached, personalized customer data.

翻譯蒟蒻(by GPT)：

在大多數網站中，路由不是完全靜態或完全動態的 - 它是一個連續變化的範疇。例如，您可以擁有一個電子商務頁面，該頁面使用經過快取的產品數據，在一段時間後重新驗證，但同時也包含未經快取的、個性化的客戶數據。

Next13 以前渲染方式以頁面做區分，一種頁面只能選擇以一種方式渲染，這樣有點缺乏彈性。

Next13 的渲染方式

在了解 Next13 的渲染方式前，需要先了解 Next13 新功能：

• Server Component
• fetch
• generateStaticParams
• dynamicParams。

了解這幾項功能後，就可以非常好理解 Next13 的渲染策略。

Server Component

在 Day3的文章 有提到 server component 幫助我們解決 Next13 以前只能在 page-level 的頁面 fetch data 的問題。有了 server component 後我們就可以在 component 當中去 fetch data。

fetch

Next13 特別包裝了 fetch，除了繼承 Web API - fetch 的功能外，它還特別在 server 維護了一份 cache，可以透過 caching 和 revalidating 設定。

fetch 預設是 force-cache，如果傳進來的參數一致，就會直接返回 cache 的結果。

// 預設是 'force-cache'
fetch('https://...', { cache: 'force-cache' })

也可以設定 revalidate 決定什麼時候要重新 fetch 資料。有兩種設定方式，這邊以最簡單的秒數為範例。

// 資料保存 3600 秒
fetch('https://...', { next: { revalidate: 3600 } })

generateStaticParams & dynamicParams

在 Day6的文章有講到，當我們在 dynamic route 渲染已知的靜態內容可以使用 generateStaticParams + dynamicParams 在 build time 就先渲染頁面。

結尾

今天講到了 Next13 以前的渲染方式，以及其不足的地方。

還有 Next13 新推出的新功能：server component、fetch、generateStaticParams和dynamicParams。了解這幾項功能之後就可以在 Next13 輕鬆渲染各個區塊。

參考資料

• Next - Server Components
• Next - Caching
• Next - data fetching
• Next.js 13 SSG, SSR & ISR | Nextjs 13 tutorial